<script lang="ts" setup>
import {getFunc, deleteFunc} from './def'

import MenuForm from './form.vue'
import type { VxeGridProps } from '#/adapter/vxe-table'

import { Page, useVbenModal, type VbenFormProps } from '@vben/common-ui'

import { Button, message, Popconfirm, Tooltip } from 'ant-design-vue'

import { useVbenVxeGrid } from '#/adapter/vxe-table'
import dayjs from 'dayjs'

// @ts-ignore
import { Icon } from '@iconify/vue'
import { $t } from '#/locales'

interface RowType {
  id: string
  parentId: string
  zhCN: string
  enUS: string
  jaJP: string
  zhTW: string
}

const [FormDrawer, FormDrawerApi] = useVbenModal({
  connectedComponent: MenuForm,
  onClosed() {
    gridApi.reload()
  },
})

const gridOptions: VxeGridProps<RowType> = {
  columns: [
    // { field: 'type', title: '菜单类型', treeNode: true, minWidth: 150 },
    {
      field: 'title',
      title: $t('system.menu.name'),
      treeNode: true,
      minWidth: 150,
      slots: {
        default: 'title',
      },
    },
    {
      field: 'icon',
      title: $t('system.menu.icon'),
      minWidth: 150,
      slots: {
        default: 'icon',
      },
    },
    { field: 'name', title: $t('system.menu.routerName'), minWidth: 150 },
    { field: 'path', title: $t('system.menu.routerPath'), minWidth: 150 },
    { field: 'component', title: $t('system.menu.component'), minWidth: 150 },
    { field: 'sort', title: $t('system.menu.sort'), minWidth: 150 },
    { field: 'createdAt', title: $t('system.menu.createTime'), minWidth: 150 },
    {
      field: 'action',
      title: $t('system.menu.action'),
      fixed: 'right',
      width: 150,
      slots: {
        default: 'action',
      },
    },
  ],
  // data: MOCK_TREE_TABLE_DATA,
  proxyConfig: {
    ajax: {
      query: async (_, formValues) => {
        const params: Record<string, any> = {}
        if (formValues.name) {
          params['name'] = formValues.name
        }
        if (formValues.title) {
          params['title'] = formValues.title
        }
        if (formValues.start) {
          params['startTime'] = dayjs(formValues.start).valueOf()
        }

        if (formValues.end) {
          params['endTime'] = dayjs(formValues.end).valueOf()
        }

        const res = await getFunc(params)
        console.log('res', res)
        return {
          items: res,
        }
      },
    },
  },
  pagerConfig: {
    enabled: false,
  },
  treeConfig: {
    parentField: 'parentId',
    rowField: 'id',
    transform: true,
  },
}
const formOptions: VbenFormProps = {
  // 默认展开
  collapsed: false,
  fieldMappingTime: [['date', ['start', 'end']]],
  schema: [
    {
      component: 'Input',
      fieldName: 'title',
      componentProps: {
        allowClear: true,
      },
      label: '菜单名称',
    },
    {
      component: 'Input',
      fieldName: 'name',
      componentProps: {
        allowClear: true,
      },
      label: '路由名称',
    },
    {
      component: 'RangePicker',
      componentProps: {
        allowClear: true,
      },
      fieldName: 'date',
      label: '创建时间',
    },
  ],
  // 控制表单是否显示折叠按钮
  showCollapseButton: true,
  // 是否在字段值改变时提交表单
  submitOnChange: true,
  // 按下回车时是否提交表单
  submitOnEnter: false,
}
const [Grid, gridApi] = useVbenVxeGrid({ gridOptions, formOptions })

const expandAll = () => {
  gridApi.grid?.setAllTreeExpand(true)
}

const collapseAll = () => {
  gridApi.grid?.setAllTreeExpand(false)
}

const add = async () => {
  FormDrawerApi.setData({})
  FormDrawerApi.open()
}

const deleteHandler = async (row: RowType) => {
  deleteFunc({
    id: row.id,
  })
    .then((_) => {
      gridApi.reload()
      message.success($t('global.form.DeleteSuccess'))
    })
    .catch((_) => {
      gridApi.reload()
      message.error($t('global.form.DeleteFailed'))
    })
}
const editHandler = async (row: RowType) => {
  FormDrawerApi.setData(row)
  FormDrawerApi.open()
}
</script>

<template>
  <Page>
    <Grid :table-title="$t('system.menu.title')">
      <template #toolbar-tools>
        <Button class="mr-2" type="primary" @click="expandAll"> {{$t('global.button.ExpandAll')}} </Button>
        <Button class="mr-2" type="primary" @click="collapseAll"> {{ $t('global.button.FoldAll') }} </Button>
        <Button type="primary" @click="add"> {{ $t('global.button.Add') }} </Button>
      </template>

      <template #icon="{ row }">
        <div class="w-full h-full flex items-center justify-center">
          <Icon :icon="row.meta.icon" style="font-size: 20px" />
        </div>
      </template>
      <template #title="{ row }">
        <Tooltip>
          <template #title>{{ row.title }}</template>
          <div>{{ $t(row.title) }}</div>
        </Tooltip>
      </template>
      <template #action="{ row }">
        <div class="flex items-center gap-2">
          <Button class="w-17" type="primary" ghost @click="editHandler(row)"> {{ $t('global.button.Edit') }} </Button>
          <Popconfirm title="确认删除吗?" :ok-text="$t('global.button.Delete')" :cancel-text="$t('global.button.Cancel')" @confirm="deleteHandler(row)">
            <Button class="w-17" danger ghost> {{ $t('global.button.Delete') }} </Button>
          </Popconfirm>
        </div>
      </template>
    </Grid>
    <FormDrawer />
  </Page>
</template>
